<!-- eslint-disable vue/multi-word-component-names -->
<template>
  <div class="divWarehouse">
    <div class="divHead">
      <ITinput />
    </div>
    <newForm ref="modify" @closeFn="closeFn" :visible.sync="newform"></newForm>
    <div class="divContent">
      <div>
        <el-button
          style="margin-bottom: 20px"
          @click="openFn"
          type="success"
          round
          plain
          >新增仓库</el-button
        >
      </div>
      <template>
        <el-table
          border
          :row-class-name="tableRowClassName"
          style="font-size: 10px"
          :header-cell-style="{
            background: '#f9f6ee',
            'text-align': 'center',
          }"
          :row-style="{ height: '0' }"
          :cell-style="{ padding: '3px', 'text-align': 'center' }"
          class="table_class"
          :data="tableData"
        >
          <el-table-column width="80" prop="number" label="序号">
            <template slot-scope="scope">
              <span v-text="getIndex(scope.$index)"> </span>
            </template>
          </el-table-column>
          <el-table-column prop="code" label="货品类型编号"></el-table-column>
          <el-table-column prop="name" label="货品类型名称"> </el-table-column>

          <el-table-column align="center" prop="createTime" label="更新时间">
          </el-table-column>
          <el-table-column align="center" prop="mobile" label="操作">
            <template slot-scope="scope">
              <el-button type="text" @click="show(scope.row)" size="small"
                >编辑</el-button
              >

              <el-button @click="delFn" type="text" size="small"
                >删除</el-button
              >
            </template>
          </el-table-column>
        </el-table>
        <PageTools
          ref="page"
          @pagesizeChange="pagesizeChange"
          @pageChange="pageChange"
          :total.sync="total"
        />
      </template>
    </div>
  </div>
</template>

<script>
import newForm from './components/newForm.vue'

import { list, Hp } from '@/api/item.js'
import constants from '@/constant/status'
export default {
  data () {
    return {
      page: {
        page: 1,
        pagesize: 10
      },
      tableData: [],
      newform: false,
      total: ''
    }
  },
  components: {
    newForm
  },
  async created () {
    this.list(this.page)
  },
  methods: {
    async openFn () {
      this.newform = true
      const {
        data: { data }
      } = await Hp()
      this.$refs.modify.form.code = data
    },
    closeFn () {
      this.newform = false
      this.$refs.modify.$refs.form.resetFields()

      this.$refs.modify.form.code = ''
      this.$refs.modify.form.name = ''
    },
    show (row) {
      console.log(row)
      this.newform = true
      this.$refs.modify.form = {
        id: row.id,
        code: row.code,
        createName: row.createName,
        createTime: row.createTime,
        createUser: row.createUser,
        logicDel: row.logicDel,
        name: row.name,
        remark: row.remark,
        status: row.status,
        updateName: row.updateName,
        updateTime: row.updateTime,
        updateUser: row.updateUser
      }
    },
    async list (page) {
      const {
        data: { data }
      } = await list(page)
      this.tableData = data.records
      this.total = data.total
    },
    tableRowClassName ({ row, rowIndex }) {
      if (rowIndex === 1 || rowIndex === 3) {
        return 'warning-row'
      } else if (rowIndex === 0 || rowIndex === 2) {
        return 'success-row'
      }
      return ''
    },
    async pagesizeChange (e) {
      this.page.pagesize = e
      await this.list(this.page)
    },
    async pageChange (e) {
      this.page.page = e
      await this.list(this.page)
      // console.log(1);
      // this.$refs.page.handleCurrentChange;
    },
    // 序号
    getIndex ($index) {
      return (this.page.page - 1) * this.page.pagesize + $index + 1
    },
    // 温度类型
    temperatureType (row, column, cellValue, index) {
      const obj = constants.temperatureType.find((item) => {
        return item.value === cellValue
      })
      return obj ? obj.label : '未知'
    },
    inspectionType (row, column, cellValue, index) {
      const obj = constants.inspectionType.find((item) => {
        return item.value === cellValue
      })
      return obj ? obj.label : '未知'
    },
    // 承重类型
    bearingType (row, column, cellValue, index) {
      const obj = constants.bearingType.find((item) => {
        return item.value === cellValue
      })
      return obj ? obj.label : '未知'
    },
    delFn () {
      this.$notify({
        title: '警告',
        message: '哥哥你laver不够呢',
        type: 'warning'
      })
    }
    // 上架下架功能
  }
}
</script>

<style lang="scss" scoped>
::v-deep .el-table .warning-row {
  background: #fdfcf9;
}

::v-deep .el-table .success-row {
  background: #ffffff;
}

.el-button--text {
  color: #ffb252;
}

::v-deep .el-table__body tr.hover-row > td.el-table__cell {
  background-color: #fff6e2;
  /* color: #f19944; */ /* 设置文字颜色，可以选择不设置 */
}
.divWarehouse {
  margin: 20px;
  .divHead {
    height: 80px;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 0 6px 0 rgb(144 142 142 / 17%);
    padding: 30px;
    margin-bottom: 20px;
  }
  .divContent {
    // height: 450px;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 0 6px 0 rgb(144 142 142 / 17%);
    padding: 30px;
    padding-bottom: 0px;
    margin-bottom: 20px;
  }
}
::v-deep .el-scrollbar__wrap {
  overflow-x: hidden;
}
.table_class {
  &::v-deep {
    .el-table__body-wrapper::-webkit-scrollbar {
      /*width: 0;宽度为0隐藏*/
      width: 4px;
      height: 10px;
    }
    .el-table__body-wrapper::-webkit-scrollbar-thumb {
      border-radius: 6px;
      box-shadow: inset 0 0 5px rgba(247, 227, 170, 0.9);
      background: rgba(247, 227, 170, 0.9); //滚动条颜色
    }
    .el-table__body-wrapper::-webkit-scrollbar-track {
      box-shadow: inset 0 0 5px rgba(247, 179, 179, 0.8);
      border-radius: 6px;

      background: rgb(255, 255, 255); //滚动条背景色
    }
  }
}
</style>
